<template>
    <view class="home">
        <!-- #ifdef APP-PLUS -->
        <view class="bakbtn" @click="getBp()" v-if="showBack">
            <image src="@/static/img/backbtn.png" mode=""></image>
        </view>
        <!-- #endif -->
        <view class="toptit">
            <view class="text-ff text-center text-32">全部分类</view>
            <view
                class="padding-20 width-100p flex align-center radius-10 bg-ff margin-lr-30 margin-top-25"
            >
                <image
                    src="../../static/wImg/greySea.png"
                    mode=""
                    class="searchimg"
                ></image>
                <view class="searchline"></view>
                <navigator url="/wNew/pages/sieveStore">
                    <input
                        type="text"
                        placeholder="输入您想要的内容"
                        class="text-24 flex-one"
                    />
                </navigator>
            </view>
        </view>
        <view class="flex align-center">
            <scroll-view scroll-y="true" class="leftbox">
                <view
                    class="text-cut-one"
                    v-for="(item, index) in firstcate"
                    :key="index"
                    :class="firstid == item.id ? 'btn_active' : 'btn'"
                    @click="choseFirst(item.id, index)"
                >
                    {{ item.name ? item.name : item.title }}
                </view>
            </scroll-view>
            <scroll-view
                scroll-y="true"
                class="rightbox"
                :scroll-into-view="toView"
                @scroll="goScroll"
            >
                <view
                    class="padding-30 bg-ff margin-bottom-20 radius-10 margin-right-20 pro-box"
                    :id="'get' + index"
                    v-for="(item, index) in firstcate"
                    :key="index"
                >
                    <view class="text-32 text-bold">{{
                        item.name ? item.name : item.title
                    }}</view>
                    <view
                        class="flex align-center flex-warp margin-top-40"
                        v-if="type == 1"
                    >
                        <view
                            class="flex align-center flex-column secondbox margin-bottom-30"
                            v-for="(items, indexs) in item.childlist"
                            :key="indexs"
                            @click="
                                choseSecond(
                                    items.id,
                                    index,
                                    items.childlist,
                                    item.id,
                                    indexs
                                )
                            "
                        >
                            <image
                                :src="items.image"
                                mode=""
                                class="second_img"
                                :class="secondid == items.id ? 'border-ce' : ''"
                            ></image>
                            <view
                                class="text-30 text-bold margin-top-20"
                                :class="secondid == items.id ? 'text-ce' : ''"
                            >
                                {{ items.name }}
                            </view>
                        </view>
                    </view>
                    <!-- <view class="flex flex-warp" v-if="firstindex==index&&type==1">
						<view class="sjbox text-cut-one" v-for="item,index in thirdcate" @click="goList(item.id,index)">
							{{item.name}}</view>
					</view> -->
                    <view
                        class="flex align-center flex-warp margin-top-40"
                        v-if="type == 2"
                    >
                        <view
                            class="flex align-center flex-column secondbox margin-bottom-30"
                            v-for="(items, indexs) in item.children"
                            :key="indexs"
                            @click="
                                choseSecond(
                                    items.id,
                                    index,
                                    items.children,
                                    item.id.indexs
                                )
                            "
                        >
                            <image
                                :src="items.cover"
                                mode=""
                                class="second_img"
                                :class="secondid == items.id ? 'border-ce' : ''"
                            ></image>
                            <view
                                class="text-30 text-bold margin-top-20"
                                :class="secondid == items.id ? 'text-ce' : ''"
                            >
                                {{ items.title }}
                            </view>
                        </view>
                    </view>
                    <!-- <view class="flex flex-warp" v-if="firstindex==index&&type==2">
						<view class="sjbox text-cut-one" v-for="item,index in thirdcate" @click="goList(item.id,index)">
							{{item.title}}
						</view>
					</view> -->
                </view>
            </scroll-view>
        </view>
        <u-tabbar
            :style="{ display: cType ? 'none' : 'block' }"
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabList"
        ></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            current: 1,
            type: "", //1商城 2服务
            firstcate: [],
            firstid: "",
            secondcate: [],
            secondid: "",
            thirdcate: [],
            firstindex: "",
            toView: "id0",
            scroll_view_top: 0, //scroll_view滚动距离
            actual_scroll_view_top: 0, //实时滚动的距离
            heightArr: [],
            chooseIndex: 0,
            isClick: false,
            catelist: [],
            showBack: true,
            tabList: [
                {
                    iconPath: "/static/tab/shouye_nor.png",
                    selectedIconPath: "/static/tab/shouye_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "/static/tab/wode_nor.png",
                    selectedIconPath: "/static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            cType: true,
        };
    },
    watch: {
        tabList: {
            handler(newVal, oldVal) {
                newVal.forEach((item, index) => {
                    if (
                        (item.text == "直播" || item.text == "动态") &&
                        uni.getStorageSync("configInfo").live_switch == 0
                    ) {
                        newVal.splice(index, 1);
                    }
                });
            },
            deep: true,
            immediate: true,
        },
    },
    async onLoad(options) {
        this.type = options.type;
        this.cType = options.cType;
        this.showBack = options.showBack == "none" ? false : true;
        if (options.type == 1) {
            if (options.id) {
                this.firstid = options.id;
            }
            //商城全部分类
            this.$u.post("/api/index/get_all_category", {}).then((res) => {
                if (res.code == 1) {
                    this.firstcate = res.data.category;
                    this.firstid = options.id
                        ? options.id
                        : res.data.category[0].id;

                    let index = res.data.category.findIndex(
                        (item) => item.id == this.firstid
                    );
                    let timeindex = index == -1 ? 0 : index;
                    this.firstindex = timeindex;
                    this.secondcate = this.firstcate[timeindex].childlist;
                    this.secondid = this.secondcate.length
                        ? this.secondcate[0].id
                        : "";
                    (this.thirdcate =
                        this.secondcate.length > 0
                            ? this.secondcate[0].childlist
                            : []),
                        setTimeout(() => {
                            this.calcHeight();
                        }, 2000);
                }
            });
        } else if (options.type == 2) {
            let res = await this.$api.service.serviceCate({
                cate_type: 3,
                children: 1,
            });
            console.log(res, "服务全部分类");
            this.firstcate = res;
            this.firstid = options.id ? options.id : res[0].id;
            let index = res.findIndex((item) => item.id == this.firstid);
            let timeindex = index == -1 ? 0 : index;
            this.firstindex = timeindex;
            this.secondcate = this.firstcate[timeindex].children;
            this.secondid = this.secondcate.length ? this.secondcate[0].id : "";
            this.thirdcate =
                this.secondcate.length > 0 ? this.secondcate[0].children : [];
        }
    },
    onReady() {},
    methods: {
        changeTab(e) {
            if (uni.getStorageSync("configInfo").live_switch !== 0) {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump(
                        `/wNew/pages/classification?type=1&showBack=none`
                    );
                } else if (e == 2) {
                    this.$func.jump(
                        "/pages/dyamicshop?children=2&area_id=" +
                            uni.getStorageSync("city")
                    );
                } else if (e == 3) {
                    this.$func.jump(
                        "/pages/dyamicshop?children=2&area_id=" +
                            uni.getStorageSync("city")
                    );
                } else if (e == 4) {
                    this.$func.jump("/pages/mine");
                }
            } else {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump(
                        `/wNew/pages/classification?type=1&showBack=none`
                    );
                } else if (e == 2) {
                    this.$func.jump("/pages/mine");
                }
            }
            return;
            if (e == 0) {
                this.$func.jump("/wNew/pages/index");
            } else if (e == 3) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    this.$func.jump("/pages/mine");
                } else {
                    this.$func.jump("/pages/dyamicshop?children=2");
                }
            } else if (e == 2) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    this.$func.jump("/pages/dyamicshop?children=2");
                } else {
                    this.$func.jump("/live/pages/live/liveList?type=1");
                }
            } else if (e == 4) {
                this.$func.jump("/pages/mine");
            }
        },
        choseFirst(id, index) {
            this.firstid = id;
            this.isClick = true;
            this.toView = "get" + index;
            console.log(this.toView);
            setTimeout((res) => {
                this.chooseIndex = index;
            }, 20);
        },
        choseSecond(id, index, childlist, ids, indexs) {
            console.log(childlist, "childlist");
            this.firstid = ids;
            this.secondid = id;
            this.firstindex = index;
            this.thirdcate = childlist;
            console.log(id, indexs, "id, index, childlist");
            // console.log(childlist, this.thirdcate, 'this.thirdcate')
            this.goList(id, 0, indexs);
        },
        calcHeight() {
            let _this = this;
            let heightArr = [];
            let h = 0;
            const query = wx.createSelectorQuery();
            let arr = [];
            query.selectAll(".pro-box").boundingClientRect();
            query.exec(function (res) {
                res[0].forEach((item) => {
                    h += item.height;
                    arr.push(h);
                });
                _this.heightArr = arr;
                console.log(_this.heightArr, "获取高度");
            });
            if (this.firstid) {
                for (var i = 0; i < this.firstcate.length; i++) {
                    if (this.firstid == this.firstcate[i].id) {
                        console.log(i, "第几个");
                        let index = i;
                        this.choseFirst(this.firstid, index);
                    }
                }
            }
        },
        // 跟随滚动更改选中状态
        goScroll(e) {
            const _this = this;

            if (
                this.isClick &&
                _this.firstid == _this.firstcate[_this.firstcate.length - 1].id
            ) {
                this.isClick = false;
                return;
            }
            // [205, 410, 615, 820, 1118] Array "获取高度
            const scrollTop = e.detail.scrollTop + 5;
            const scorllArr = this.heightArr;

            if (
                scrollTop + 5 >=
                scorllArr[scorllArr.length - 1] - _this.winHeight
            ) {
                _this.chooseIndex = scorllArr.length - 1;
            } else {
                for (let i = 0; i < scorllArr.length; i++) {
                    // 如果滚动的高度大于0且小于第一个大元素的高度，左侧当前选中还是第一个
                    if (scrollTop >= 0 && scrollTop < scorllArr[0]) {
                        _this.chooseIndex = 0;
                    } else if (
                        scrollTop >= scorllArr[i - 1] &&
                        scrollTop < scorllArr[i]
                    ) {
                        // 如果滚动的高度大于等于上一个大元素的高度，且小于当前大元素最终所到达的高度，则左侧选中当前的
                        _this.chooseIndex = i;
                    }
                }
            }
            console.log(_this.chooseIndex, "_this.chooseIndex");
            console.log(_this.firstcate[_this.chooseIndex].id, "key");
            _this.firstid = _this.firstcate[_this.chooseIndex].id;
            // _this.productList[_this.chooseIndex].list[second_index].id;
            // console.log(_this.chooseIndex+','+_this.cateid)
        },
        goList(id, index, rowIndex) {
            console.log(id, this.type);

            if (this.type == 1) {
                uni.navigateTo({
                    url:
                        "/wNew/pages/classify?id=" +
                        this.firstid +
                        "&second=" +
                        id +
                        "&third=" +
                        index +
                        "&rowIndex=" +
                        rowIndex,
                });
            } else if (this.type == 2) {
                uni.navigateTo({
                    url:
                        "/wNew/pages/fuwucate?id=" +
                        this.firstid +
                        "&second=" +
                        id +
                        "&third=" +
                        index,
                });
            }
        },
        getBp() {
            uni.navigateBack({
                delta: 1,
            });
        },
    },
};
</script>

<style>
@import url(@/components/common.css);

.home {
    width: 100%;
    height: 100vh;
    background: #fff;
}

.toptit {
    background: linear-gradient(180deg, #5d64ca 0%, #6f9bdf 100%);
    height: 264rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.searchimg {
    width: 25rpx;
    height: 23rpx;
}

.searchline {
    width: 2rpx;
    height: 32rpx;
    background: #b0b0b0;
    margin: 0 20rpx;
}

.leftbox {
    width: 200rpx;
    height: calc(100vh - 264rpx);
    background: #f6f6f6;
}

.rightbox {
    width: calc(100% - 200rpx);
    height: calc(100vh - 264rpx);
    background: #f6f6f6;
}

.btn_active {
    width: 200rpx;
    height: 88rpx;
    background: #606dce;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
}

.btn {
    width: 200rpx;
    height: 88rpx;
    background: #f6f6f6;
    font-size: 28rpx;
    color: #333333;
    text-align: center;
    line-height: 88rpx;
}

.second_img {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
}

.secondbox {
    margin-right: 50rpx;
}

.secondbox:nth-child(3n) {
    margin-right: 0;
}

.border-ce {
    border: 4rpx solid #606dce;
}

.flex-column {
    flex-direction: column;
}

.sjbox {
    width: 140rpx;
    height: 58rpx;
    background: #f6f6f6;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-size: 26rpx;
    color: #333333;
    line-height: 58rpx;
    text-align: center;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}

.sjbox:nth-child(3n) {
    margin-right: 0;
}
.bakbtn {
    width: 65rpx;
    height: 65rpx;
    position: fixed;
    top: 90rpx;
    left: 30rpx;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.bakbtn image {
    width: 40rpx;
    height: 40rpx;
}
</style>